Vue2迁移-v-is用于 DOM 内模板解析解决方案

发表于 | 分类于 |
字数统计: 293 字 | 阅读时长 ≈ 1 分钟

提示：本节仅影响直接在页面的 HTML 中写入 Vue 模板的情况。 在 DOM 模板中使用时，模板受原生 HTML 解析规则的约束。一些 HTML 元素，例如 <ul>，<ol>，<table> 和 <select> 对它们内部可以出现的元素有限制，和一些像 <li>，<tr>，和 <option> 只能出现在某些其他元素中。

2.x 语法

在 Vue 2 中，我们建议通过在原生 tag 上使用 is prop 来解决这些限制：

1
2
3
<table>
  <tr is="blog-post-row"></tr>
</table>

3.x 语法

随着 is 的行为变化，我们引入了一个新的指令 v-is，用于解决这些情况：

1
2
3
<table>
  <tr v-is="'blog-post-row'"></tr>
</table>

WARNING

v-is 函数像一个动态的 2.x :is 绑定——因此，要按注册名称渲染组件，其值应为 JavaScript 字符串文本：

1
2
3
4
5
<!-- 不正确，不会渲染任何内容 -->
<tr v-is="blog-post-row"></tr>

<!-- 正确 -->
<tr v-is="'blog-post-row'"></tr>